<script setup lang='ts'>
import { ref, reactive, watch, onMounted, onUnmounted } from 'vue'
import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from 'element-plus'
import { getDelrestore, getRestore_Native,DelPushWorks } from '@/api/canvas'
const route = useRoute()
const router = useRouter()
let Restore_Native = ref<Array<any>>([])
  const myworks = ref<Array<any>>([]);
let HUIFU = (id: any) => {
  getRestore_Native(id).then(({ data }) => {
    if (data.code === 0 && confirm("您确定要还原该删除作品吗？")) {
      ElMessage({
        showClose: true,
        message: data.msg,
        type: 'warning',
        onClose() {
          router.push('/home/myw')
        },
      })
    }

  })




}

getDelrestore(sessionStorage.getItem("userId")).then((res) => {

  console.log(res, "55555555555555555666666666");
  Restore_Native.value.push(...res.data.data)


})
const CanvasDelete = async (id: string) => {

  if (confirm('确定删除我的作品吗？')) {

    let Deleteindex = Restore_Native.value.findIndex((item) => item.id == id)
    if(Deleteindex !==-1 && Restore_Native.value.length > 1){
       Restore_Native.value.splice(Deleteindex, 1)
    }
   

    let { data: { code, msg } } = await getDelrestore(id)
    if (code === 0) {
      ElMessage({
        message: msg,
        type: 'success',
        duration: 1500,
        onClose() {
          // router.push('/home/hui')
        },
      })
    }
  }

}
//倒计时计数
let counttime=ref(5)
//倒计时字体颜色
const countColor='pink'
//控制倒计时是否活动的标志
const isCountdow=ref(true)

let startCountTime=()=>{
  const installtime=setInterval(async (id:any)=>{
    // if(id) return ; // 如果没有ID，则不执行删除操作 
    
    if(counttime.value>0){
      //判断时间每次减少一秒
      counttime.value--;
    }else{
      clearInterval(installtime)//倒计时结束清除定时器
    //  HUIFU(id)//调用点击函数删除接口
     let res:any=await  CanvasDelete(id)
     
      isCountdow.value=false //隐藏计时器元素
     
    }
  },1000)
  onUnmounted(() => {
    //组件卸载时清除定时器，防止内存泄漏
  })
}
onMounted(()=>{
  startCountTime()
})
</script>

<template>
  <div class="hsot">
    <!-- 爱美之心回收站 -->

    <div class="lidst" v-for="(item, index) in Restore_Native" :key="index">
      <el-button type="danger" @click="HUIFU(item.id)">恢复</el-button>
      <img :src="item.Base64" alt="">
    </div>
      <div class="del" v-if="isCountdow">
      <span :style="{color:countColor}">离删除数据还有{{ counttime }}秒？</span>
      
      </div>
  </div>
</template>

<style lang='scss' scoped>
.hsot {
  width: 150%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  overflow: auto; //开启移动
}

.lidst {
  width: 200px;
  height: 310px;
  border: 2px solid rgb(238, 0, 171);
  position: relative;
  margin: 20px 10px;
}

.lidst img {
  width: 200px;
  height: 280px;
}
</style>